<template>
    <div class="qilin-contributionDialog">
        <el-dialog
            :visible.sync="ownDialogConfig.isShow" :title="ownDialogConfig.title"
            width="600px" center append-to-body :before-close="handleClose"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-form ref="formData" :model="formData" :rules="formRule" size="mini"
                label-width="60px" label-position="right" label-suffix=":" class="upload-form"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="部门" prop="employeeDepartment">
                            <el-select placeholder="请选择" v-model="formData.employeeDepartment"
                                clearable @change="changeEmployeeDepartment"
                            >
                                <el-option v-for="item in employeeDepartmentList" :key="item.id"
                                    :label="item.label" :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="employeeId">
                            <el-select placeholder="请选择姓名" v-model="formData.employeeId" clearable
                                filterable
                            >
                                <el-option v-for="item in employeeNameList" :key="item.id"
                                    :label="`${item.label}(${item.code})`" :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工龄" prop="workingYears">
                            <el-select placeholder="请选择工龄" v-model.number="formData.workingYears"
                                clearable @change="changeWorkingYears"
                            >
                                <el-option v-for="item in workingYearList" :key="item.value"
                                    :label="item.label" :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="积分" prop="contributionIntegral">
                            <el-input placeholder="请输入积分" v-model.number="formData.contributionIntegral"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea" v-model="formData.remark" :rows="3"
                                placeholder="请输入"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button type="default" size="mini" @click="handleClose">取消</el-button>
                <el-button type="primary" size="mini" @click="submitData('formData')">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {getEmployeeData,insertContributionData} from "@/api/index.js";
export default {
    data(){
        return{
            ownDialogConfig:{ //弹窗自身的配置
                isShow:false,
                title:"新增"
            },
            formData:{ //表单配置项
                employeeDepartment:"",
                employeeName:"",
                employeeId:"",
                workingYears:"",
                contributionIntegral:"",
                remark:""
            },
            formRule:{ //表单规则配置
                employeeDepartment:[
                    {
                        required:true,
                        message:"请选择部门",
                        trigger:"change"
                    }
                ],
                employeeId:[
                    {
                        required:true,
                        message:"请选择姓名",
                        trigger:"change"
                    }
                ],
                workingYears:[
                    {
                        required:true,
                        message:"请选择工龄",
                        trigger:"change"
                    }
                ],
                contributionIntegral:[
                    {
                        required:true,
                        message:"请填写积分",
                        trigger:"blur"
                    }
                ]
            },
            employeeDepartmentList:[ //部门下拉选择数据集
                {
                    label:"综合部",
                    value:"综合部",
                    id:1
                },
                {
                    label:"财务部",
                    value:"财务部",
                    id:2
                },
                {
                    label:"市场拓展部",
                    value:"市场拓展部",
                    id:3
                },
                {
                    label:"系统集成部",
                    value:"系统集成部",
                    id:4
                },
                {
                    label:"工程部",
                    value:"工程部",
                    id:5
                },
                {
                    label:"产品研发部",
                    value:"产品研发部",
                    id:6
                },
                {
                    label:"平台运维部",
                    value:"平台运维部",
                    id:7
                }
            ],
            employeeNameList:[], //姓名下拉选择数据集
            workingYearList:[ // 工龄下拉选择数据集
                {
                    label:"1年",
                    value:1
                },
                {
                    label:"2年",
                    value:2
                },
                {
                    label:"3年",
                    value:3
                },
                {
                    label:"4年",
                    value:4
                },
                {
                    label:"5年",
                    value:5
                },
                {
                    label:"6年",
                    value:6
                },
                {
                    label:"7年",
                    value:7
                },
                {
                    label:"8年",
                    value:8
                },
                {
                    label:"9年",
                    value:9
                },
                {
                    label:"10年",
                    value:10
                },
                {
                    label:"11年",
                    value:11
                },
                {
                    label:"12年",
                    value:12
                },
                {
                    label:"13年",
                    value:13
                },
                {
                    label:"14年",
                    value:14
                },
                {
                    label:"15年",
                    value:15
                }
            ]
        }
    },
    methods:{
        initUpdate(){
            this.ownDialogConfig.isShow=true;
        },
        // 当选择部门事件监听
        changeEmployeeDepartment(value){
            this.formData.employeeId="";
            this.$nextTick(()=>{
                this.$refs["formData"].clearValidate("employeeId");
            });
            if(!value){
                this.employeeNameList=[];
            }else{
                this.getEmployeeData(value);
            }
        },
        // 初始化获取所在部门下人员信息事件监听
        getEmployeeData(departmentName){
            getEmployeeData({employeeDepartment:departmentName}).then((res)=>{
                if(res.code === 200){
                    this.employeeNameList=res.result.map((item)=>{
                        return {
                            id:item.employeeId,
                            label:item.employeeName,
                            value:item.employeeId,
                            code:item.employeeCode
                        }
                    });
                }
            });
        },
        // 改变工龄下拉数据事件监听
        changeWorkingYears(value){
            this.$nextTick(()=>{
                this.$refs["formData"].clearValidate("contributionIntegral");
            });
            if(!value){
                this.formData.contributionIntegral="";
            }else{
                this.formData.contributionIntegral=value * 15;
            }
        },
        // 点击确认按钮事件监听
        submitData(refName){
            this.$refs[refName].validate((valid)=>{
                if(valid){
                    // console.log(this.formData);
                    let formData={
                        employeeId:this.formData.employeeId,
                        employeeDepartment:this.formData.employeeDepartment,
                        workingYears:this.formData.workingYears,
                        contributionIntegral:this.formData.contributionIntegral,
                        remark:this.formData.remark
                    };
                    insertContributionData(formData).then((res)=>{
                        if(res.code === 200){
                            this.$message({
                                message:"新增成功",
                                type:"success"
                            });
                            this.$emit("refresh");
                            this.handleClose();
                        }else{
                            this.$message({
                                message:res.message || "请求错误",
                                type:"error"
                            });
                        }
                    });
                }
            });
        },
        // 关闭弹窗事件监听
        handleClose(){
            this.employeeNameList=[];
            this.$refs["formData"].resetFields();
            for(let key in this.formData){
                this.formData[key]="";
            }
            this.ownDialogConfig.isShow=false;
        }
    }
}
</script>
